<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
    <main class="main">
        <!--头部-->
        <header class="heared">
            <span class="head-logo">新能源智能环境管理系统</span>
            <ul class="head-ul">
                <li><a href="home.html">首页</a> </li>
                <li><a href="videlctr.html">视频监控</a> </li>
                <li><a href="map.html" class="active-a">地图管理</a> </li>
                <li><a href="static.html">统计分析</a> </li>
                <li><a href="form.html">表单信息</a> </li>
                <li><a href="user.html">用户管理</a></li>
                <li><a href="part.html">部门管理</a></li>
                <li><a href="date.html">日程管理</a></li>

            </ul>
            <div class="head-right"><span id="time"></span><span>管理员：王安邦</span></div>
        </header>
        <!--身体-->
        <section class="section home">
            <div class="map_box" id="map_box"></div>
            <div class="map_top">
                <ul>
                    <li class="active"><i class="glyphicon glyphicon-pencil"></i><a href="javascript:void (0)"
                            class="active">图层选择</a> </li>
                    <li><i class="glyphicon glyphicon-zoom-in"></i><a href="javascript:void (0)">缩小</a> </li>
                    <li><i class="glyphicon glyphicon-zoom-out"></i><a href="javascript:void (0)">放大</a> </li>
                    <li><i class="glyphicon glyphicon-screenshot"></i><a href="javascript:void (0)">对比</a> </li>
                    <li><i class="glyphicon glyphicon-search"></i><a href="javascript:void (0)">搜索</a> </li>
                    <li><i class="glyphicon glyphicon-wrench"></i><a href="javascript:void (0)">工具</a> </li>
                    <li><i class="glyphicon glyphicon-fullscreen"></i><a href="javascript:void (0)">全屏</a> </li>
                </ul>
            </div>
            <div class="map_select">
                <p><input type="checkbox" id="check01"><span>噪音设备</span></p>
                <p><input type="checkbox" id="check02"><span>视频设备</span></p>
                <p><input type="checkbox" id="check03"><span>扬尘设备</span></p>
                <p><input type="checkbox" id="check04"><span>工地信息</span></p>

            </div>


        </section>

    </main>
    <script src="js/jquery.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
    <script src="js/map.js"></script>
    <script>
        $(function () {
            $(".head-ul li a").click(function () {
                $(this).addClass("active-a").parents("li").siblings().find("a").removeClass("active-a");
                $(this).parents('li').find("ul").show();
                $(this).parents("li").sibling().find("ul").hide();

            })
            getTime();
        })
        //    格式化时间
        function getTime() {
            var day = new Date();
            var year = day.getFullYear();
            var moutth = day.getMonth() + 1;
            var date = day.getDate();
            var hour = day.getHours();
            var min = day.getMinutes();
            var sec = day.getSeconds();
            var str = year + '-' + moutth + '-' + date + ' ' + hour + ":" + min + ':' + sec;
            $("#time").text(str);
        }
    </script>
</body>

</html>